<template>
  <el-dialog
    :title="typeStatus === 'create' ? '新建' : '编辑'"
    v-model="dialogVisible"
    width="500"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="110px"
    >
      <!-- <el-form-item label="问候语id" prop="id">
        <el-input
          maxlength="10"
          show-word-limit
          class="!w-240px"
          v-model="formData.id"
          :disabled="typeStatus !== 'create'"
          placeholder="请输入问候语id"
        />
      </el-form-item> -->
      <el-form-item label="问候语名称" prop="greetType">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.greetType"
          placeholder="请输入问候语名称"
        />
      </el-form-item>
      <el-form-item label="问候语内容" prop="greetContent">
        <el-input
          show-word-limit
          class="!w-240px"
          v-model="formData.greetContent"
          placeholder="请输入问候语内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="flex justify-center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps } from 'vue'
import { debounce } from '@/utils/debounce'
import dayjs from 'dayjs'
import robotData from '../welcomeData.json'
import { ElMessage } from 'element-plus'
import * as WelcomeApi from '@/api/welcome/index'

const dialogVisible = ref(false)
const typeStatus = ref()
const formRef = ref()

const formData = ref({
  id: '', // 问候语id
  greetType: '', // 问候语名称
  greetContent: '', // 问候语内容
})

const validateId = (_, value: any, callback: any) => {
  const numberRegex = /^\d+$/
  if (!value) {
    return callback(new Error('问候语id不能为空'))
  } else if (!numberRegex.test(value)) {
    return callback(new Error('请输入有效的数字'))
  } else {
    callback()
  }
}

// const formRules = reactive({
//   id: [
//     { required: true, message: '问候语id不能为空', trigger: 'blur' },
//     { validator: validateId, trigger: 'blur' },
//   ],
//   greetType: [
//     { required: true, message: '问候语名称不能为空', trigger: 'blur' },
//   ],
//   greetContent: [
//     { required: true, message: '问候语内容不能为空', trigger: 'blur' },
//   ],
// })

const resetForm = () => {
  formData.value = {
    id: '', // 问候语id
    greetType: '', // 问候语名称
    greetContent: '', // 问候语内容
  }
  formRef.value?.resetFields()
}

const _id = ref()
const open = (type: string, row: any) => {
  if (type === 'create') {
    typeStatus.value = 'create'
    resetForm()
    dialogVisible.value = true
  } else {
    typeStatus.value = 'edit'
    _id.value = row.id
    const originData = { ...row }
    formData.value = originData
    formRef.value?.resetFields()
    dialogVisible.value = true
  }
}

defineExpose({ open })

const props = defineProps({
  getList: {
    type: Function,
    required: true,
  },
})

const emit = defineEmits(['changeData', 'handleQuery'])
const handleSubmit = debounce(async () => {
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return

  if (typeStatus.value === 'create') {
    // emit('changeData', {
    //   ...formData.value,
    //   createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    // })
    const postData = {
      ...formData.value,
      createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    }
    const res = await WelcomeApi.welcomeAdd(postData)
    if (res.flag) {
      ElMessage({ type: 'success', message: '添加成功' })
      dialogVisible.value = false
      props.getList()
    }
  } else {
    // emit('changeData', {
    //   ...formData.value,
    //   updateTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    // })
    const postData = {
      ...formData.value,
      updateTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      id: _id.value,
    }
    const res = await WelcomeApi.welcomeEdit(postData)
    if (res.flag) {
      ElMessage({ type: 'success', message: '修改成功' })
      dialogVisible.value = false
      props.getList()
    }
  }
}, 500)
</script>
